<template>
  <div class="chart-box">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'bar',
    props: {
      chConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //数据源
      sourceData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      //功能类型（父组件是什么功能模块）takeOver：运管首页的收缴率
      type: {
        type: String,
        default: '',
      },
    },
    watch: {},
    data() {
      return {
        myChart: null,
        polar: {
          title: {
            text: this.chConfig.title,
            textStyle: {
              fontSize: 14,
              color: '#03BCB5',
            },
          },
          color: this.chConfig.color,
          tooltip: {
            show: this.chConfig.tooltip.show,
            trigger: 'axis',
            backgroundColor:"#40516A",
            formatter: param => {
              if (this.type == 'takeOver') {
                let axisVal = param[0].axisValue.slice(0,param[0].axisValue.length - 1)
                let source = this.sourceData.find(item => item.month == axisVal) || {};
                return param[0].axisValue + '缴费率：' + param[0].data + '%'
                + '<br/>' + '应收金额：' + (source.amountReceivable || 0) + '万元'
                + '<br/>' + '实收金额：' + (source.amountReceived || 0) + '万元'
                + '<br/>' + '欠费总金额：' + (source.arrearsAmount || 0) + '万元';
              }
            },
          },
          legend: {
            itemWidth: 15,
            data: this.chConfig.legend,
            x: 'center',
            y: 'bottom',
            textStyle: {
              color: '#F0F0F0',
            },
          },
          dataZoom: this.chConfig.dataZoom ? [
            {
              type: 'slider',
              show: true,
              maxValueSpan: 10,
              xAxisIndex: 0,
              bottom: 10,
              // start:_this.zoomShow == true ? document.body.clientWidth < 1920 ? 40 : 60 : 100,
              start: document.body.clientWidth <= 1440 ? 70 : 100,
              end: 0,
              height: 10,
              // handleSize: '0px',//控制手柄的尺寸，展示几条数据
              handleStyle: {
                color: '#3AAAF0',
                borderColor: '#007acc',
              },
              fillerColor: 'rgba(27, 102, 177, 1)',
              backgroundColor: 'rgba(4, 28, 52, 1)',
              showDetail: false,
              borderColor: '#002944',
            },
          ] : [],
          grid: {
            top: this.chConfig.gridTop,
            bottom: this.chConfig.gridBottom,
            left: this.chConfig.left,
            right: this.chConfig.right,
            x: this.chConfig.x,
            y: this.chConfig.y,
            x2: this.chConfig.x2,
            y2: this.chConfig.y2,
          },
          xAxis: {
            show: this.chConfig.xAxis.show,
            type: 'category',
            name: this.chConfig.isXAxisDataName,
            data: this.chConfig.xAxis.xAxisData,
            axisTick: {
              //刻度线
              show: this.chConfig.xAxis.axisTickShow,
              length: this.chConfig.xAxis.axisTickLength,
              inside: true,
              alignWithLabel: true,
              lineStyle: {
                color: '#CCCCCC',
              },
            },
          },
          yAxis: {
            show: this.chConfig.yAxis.show,
            splitLine: {
              show: this.chConfig.yAxis.splitLineShow,
            },
            name: this.chConfig.yAxis.name,
            nameTextStyle: {
              color: '#333',
              fontSize: 12,
            },
            type: this.chConfig.yAxis.type || 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#ccc', //左边线的颜色
                width: '1', //坐标线的宽度
              },
            },
            axisLabel: {
              textStyle: {
                color: '#333', //坐标值得具体的颜色
              },
              formatter: (value, index) => {
                return this.chConfig.yAxis.grainUnit ? value + this.chConfig.yAxis.grainUnit || '' : value;
              },
            },
            data: this.chConfig.yAxis.data || null,
          },
          series: this.chConfig.list,
        },
      };
    },

    methods: {
      initChart() {
        const chart = this.$refs.chart;
        this.myChart = echarts.init(chart);
        this.myChart.setOption(this.polar);
        window.addEventListener('resize', () => {
          this.resize();
        });
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', () => {
            this.resize();
          });
        });
      },
      resize() {
        this.$nextTick(() => {
          this.myChart.resize();
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts,
  .chart,
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>
